import React, { useState } from 'react';
import { Card, CardContent, CardHeader, CardTitle } from '../ui/card';
import { Button } from '../ui/button';
import { Badge } from '../ui/badge';
import { Tabs, TabsContent, TabsList, TabsTrigger } from '../ui/tabs';
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '../ui/table';
import { Input } from '../ui/input';
import { Label } from '../ui/label';
import { Textarea } from '../ui/textarea';
import { 
  BookOpen, 
  Users, 
  FileText, 
  Upload,
  Edit,
  Eye,
  Plus,
  Download
} from 'lucide-react';

interface Course {
  id: string;
  name: string;
  code: string;
  semester: string;
  class: string;
  students: number;
  capacity: number;
  schedule: string;
  location: string;
  status: 'active' | 'completed' | 'upcoming';
}

interface CourseResource {
  id: string;
  name: string;
  type: 'courseware' | 'assignment' | 'reference';
  uploadDate: string;
  size: string;
}

export function CourseManagement() {
  const [selectedCourse, setSelectedCourse] = useState<string | null>(null);
  const [showSyllabusEditor, setShowSyllabusEditor] = useState(false);

  const courses: Course[] = [
    {
      id: '1',
      name: '高等数学A',
      code: 'MATH001',
      semester: '2024-1',
      class: '计算机21-1班',
      students: 42,
      capacity: 45,
      schedule: '周一 8:00-9:40',
      location: '教学楼A-101',
      status: 'active'
    },
    {
      id: '2',
      name: '高等数学A',
      code: 'MATH001',
      semester: '2024-1',
      class: '计算机21-2班',
      students: 38,
      capacity: 45,
      schedule: '周二 10:00-11:40',
      location: '教学楼A-101',
      status: 'active'
    },
    {
      id: '3',
      name: '线性代数',
      code: 'MATH002',
      semester: '2024-1',
      class: '数学21-1班',
      students: 45,
      capacity: 45,
      schedule: '周三 14:00-15:40',
      location: '教学楼B-203',
      status: 'active'
    }
  ];

  const courseResources: CourseResource[] = [
    {
      id: '1',
      name: '第一章：函数与极限.pptx',
      type: 'courseware',
      uploadDate: '2024-03-10',
      size: '2.5MB'
    },
    {
      id: '2',
      name: '习题集第一章.pdf',
      type: 'assignment',
      uploadDate: '2024-03-12',
      size: '1.8MB'
    },
    {
      id: '3',
      name: '高等数学参考书目.pdf',
      type: 'reference',
      uploadDate: '2024-03-08',
      size: '856KB'
    }
  ];

  const getStatusBadge = (status: string) => {
    switch (status) {
      case 'active':
        return <Badge className="bg-green-100 text-green-800">进行中</Badge>;
      case 'completed':
        return <Badge variant="secondary">已结束</Badge>;
      case 'upcoming':
        return <Badge variant="outline">未开始</Badge>;
      default:
        return <Badge variant="outline">未知</Badge>;
    }
  };

  const getResourceTypeIcon = (type: string) => {
    switch (type) {
      case 'courseware':
        return <FileText className="h-4 w-4 text-blue-500" />;
      case 'assignment':
        return <BookOpen className="h-4 w-4 text-orange-500" />;
      case 'reference':
        return <Upload className="h-4 w-4 text-green-500" />;
      default:
        return <FileText className="h-4 w-4" />;
    }
  };

  const getResourceTypeName = (type: string) => {
    switch (type) {
      case 'courseware':
        return '课件';
      case 'assignment':
        return '作业';
      case 'reference':
        return '参考资料';
      default:
        return '其他';
    }
  };

  return (
    <div className="space-y-6">
      <div className="flex justify-between items-center">
        <h1 className="text-2xl font-medium">课程管理</h1>
        <Button variant="outline">
          <Plus className="mr-2 h-4 w-4" />
          新增课程
        </Button>
      </div>

      <Tabs defaultValue="courses" className="space-y-4">
        <TabsList>
          <TabsTrigger value="courses">授课课程</TabsTrigger>
          <TabsTrigger value="syllabus">课程大纲</TabsTrigger>
          <TabsTrigger value="resources">教学资源</TabsTrigger>
        </TabsList>

        <TabsContent value="courses" className="space-y-4">
          {/* Course Overview */}
          <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
            <Card>
              <CardContent className="p-6">
                <div className="flex items-center justify-between">
                  <div>
                    <p className="text-sm text-muted-foreground">授课课程</p>
                    <p className="text-2xl font-medium">{courses.length}</p>
                  </div>
                  <BookOpen className="h-8 w-8 text-blue-500" />
                </div>
              </CardContent>
            </Card>
            
            <Card>
              <CardContent className="p-6">
                <div className="flex items-center justify-between">
                  <div>
                    <p className="text-sm text-muted-foreground">教学班级</p>
                    <p className="text-2xl font-medium">{courses.length}</p>
                  </div>
                  <Users className="h-8 w-8 text-green-500" />
                </div>
              </CardContent>
            </Card>
            
            <Card>
              <CardContent className="p-6">
                <div className="flex items-center justify-between">
                  <div>
                    <p className="text-sm text-muted-foreground">学生总数</p>
                    <p className="text-2xl font-medium">{courses.reduce((sum, course) => sum + course.students, 0)}</p>
                  </div>
                  <FileText className="h-8 w-8 text-orange-500" />
                </div>
              </CardContent>
            </Card>
          </div>

          {/* Course List */}
          <Card>
            <CardHeader>
              <CardTitle>课程列表</CardTitle>
            </CardHeader>
            <CardContent>
              <Table>
                <TableHeader>
                  <TableRow>
                    <TableHead>课程名称</TableHead>
                    <TableHead>课程代码</TableHead>
                    <TableHead>班级</TableHead>
                    <TableHead>学期</TableHead>
                    <TableHead>学生人数</TableHead>
                    <TableHead>上课时间</TableHead>
                    <TableHead>状态</TableHead>
                    <TableHead>操作</TableHead>
                  </TableRow>
                </TableHeader>
                <TableBody>
                  {courses.map((course) => (
                    <TableRow key={course.id}>
                      <TableCell className="font-medium">{course.name}</TableCell>
                      <TableCell>{course.code}</TableCell>
                      <TableCell>{course.class}</TableCell>
                      <TableCell>{course.semester}</TableCell>
                      <TableCell>
                        <div className="flex items-center space-x-1">
                          <span>{course.students}/{course.capacity}</span>
                          <div className="w-16 bg-gray-200 rounded-full h-2">
                            <div 
                              className="bg-blue-600 h-2 rounded-full" 
                              style={{ width: `${(course.students / course.capacity) * 100}%` }}
                            ></div>
                          </div>
                        </div>
                      </TableCell>
                      <TableCell>{course.schedule}</TableCell>
                      <TableCell>{getStatusBadge(course.status)}</TableCell>
                      <TableCell>
                        <div className="flex space-x-2">
                          <Button variant="ghost" size="sm">
                            <Eye className="h-3 w-3" />
                          </Button>
                          <Button variant="ghost" size="sm">
                            <Edit className="h-3 w-3" />
                          </Button>
                        </div>
                      </TableCell>
                    </TableRow>
                  ))}
                </TableBody>
              </Table>
            </CardContent>
          </Card>
        </TabsContent>

        <TabsContent value="syllabus" className="space-y-4">
          <Card>
            <CardHeader>
              <CardTitle className="flex items-center justify-between">
                课程大纲管理
                <Button onClick={() => setShowSyllabusEditor(true)}>
                  <Edit className="mr-2 h-4 w-4" />
                  编辑大纲
                </Button>
              </CardTitle>
            </CardHeader>
            <CardContent>
              <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
                {courses.map((course) => (
                  <Card key={course.id} className="border-l-4 border-l-blue-500">
                    <CardHeader>
                      <CardTitle className="text-lg">{course.name}</CardTitle>
                      <p className="text-sm text-muted-foreground">{course.class}</p>
                    </CardHeader>
                    <CardContent>
                      <div className="space-y-2 text-sm">
                        <p><strong>课程目标:</strong> 掌握数学分析的基本理论和方法</p>
                        <p><strong>主要内容:</strong> 函数、极限、连续、导数、积分等</p>
                        <p><strong>考核方式:</strong> 平时成绩30% + 期末考试70%</p>
                      </div>
                      <div className="flex justify-end mt-4">
                        <Button variant="outline" size="sm">
                          <Eye className="mr-1 h-3 w-3" />
                          查看详情
                        </Button>
                      </div>
                    </CardContent>
                  </Card>
                ))}
              </div>
            </CardContent>
          </Card>
        </TabsContent>

        <TabsContent value="resources" className="space-y-4">
          <Card>
            <CardHeader>
              <CardTitle className="flex items-center justify-between">
                教学资源管理
                <Button>
                  <Upload className="mr-2 h-4 w-4" />
                  上传资源
                </Button>
              </CardTitle>
            </CardHeader>
            <CardContent>
              {/* Resource Categories */}
              <div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
                <Card className="text-center p-4">
                  <FileText className="mx-auto h-8 w-8 mb-2 text-blue-500" />
                  <h4 className="font-medium">课件资料</h4>
                  <p className="text-2xl font-medium mt-1">
                    {courseResources.filter(r => r.type === 'courseware').length}
                  </p>
                </Card>
                
                <Card className="text-center p-4">
                  <BookOpen className="mx-auto h-8 w-8 mb-2 text-orange-500" />
                  <h4 className="font-medium">作业资料</h4>
                  <p className="text-2xl font-medium mt-1">
                    {courseResources.filter(r => r.type === 'assignment').length}
                  </p>
                </Card>
                
                <Card className="text-center p-4">
                  <Upload className="mx-auto h-8 w-8 mb-2 text-green-500" />
                  <h4 className="font-medium">参考资料</h4>
                  <p className="text-2xl font-medium mt-1">
                    {courseResources.filter(r => r.type === 'reference').length}
                  </p>
                </Card>
              </div>

              {/* Resource List */}
              <Table>
                <TableHeader>
                  <TableRow>
                    <TableHead>资源名称</TableHead>
                    <TableHead>类型</TableHead>
                    <TableHead>上传时间</TableHead>
                    <TableHead>文件大小</TableHead>
                    <TableHead>操作</TableHead>
                  </TableRow>
                </TableHeader>
                <TableBody>
                  {courseResources.map((resource) => (
                    <TableRow key={resource.id}>
                      <TableCell className="flex items-center space-x-2">
                        {getResourceTypeIcon(resource.type)}
                        <span className="font-medium">{resource.name}</span>
                      </TableCell>
                      <TableCell>
                        <Badge variant="outline">{getResourceTypeName(resource.type)}</Badge>
                      </TableCell>
                      <TableCell>{resource.uploadDate}</TableCell>
                      <TableCell>{resource.size}</TableCell>
                      <TableCell>
                        <div className="flex space-x-2">
                          <Button variant="ghost" size="sm">
                            <Download className="h-3 w-3" />
                          </Button>
                          <Button variant="ghost" size="sm">
                            <Edit className="h-3 w-3" />
                          </Button>
                        </div>
                      </TableCell>
                    </TableRow>
                  ))}
                </TableBody>
              </Table>
            </CardContent>
          </Card>
        </TabsContent>
      </Tabs>

      {/* Syllabus Editor Modal */}
      {showSyllabusEditor && (
        <div className="fixed inset-0 bg-black/50 flex items-center justify-center p-4 z-50">
          <Card className="w-full max-w-2xl max-h-[90vh] overflow-auto">
            <CardHeader>
              <CardTitle>编辑课程大纲</CardTitle>
            </CardHeader>
            <CardContent className="space-y-4">
              <div>
                <Label htmlFor="course-objectives">课程目标</Label>
                <Textarea 
                  id="course-objectives"
                  placeholder="请输入课程学习目标..."
                  rows={3}
                />
              </div>
              
              <div>
                <Label htmlFor="course-content">主要内容</Label>
                <Textarea 
                  id="course-content"
                  placeholder="请输入课程主要内容..."
                  rows={4}
                />
              </div>
              
              <div>
                <Label htmlFor="assessment">考核方式</Label>
                <Textarea 
                  id="assessment"
                  placeholder="请输入考核方式和评分标准..."
                  rows={2}
                />
              </div>
              
              <div className="flex gap-2 pt-4">
                <Button className="flex-1">保存大纲</Button>
                <Button variant="outline" onClick={() => setShowSyllabusEditor(false)}>取消</Button>
              </div>
            </CardContent>
          </Card>
        </div>
      )}
    </div>
  );
}